<template>
  <div class="select-box">
    <select @change="selectChange($event.target.value)">
      <option v-for="item in options" :key="item.id" :value="item.id">{{ item.title }}</option>
    </select>
  </div>
</template>

<script setup>
import { selectorProps } from './props';
const { data } = defineProps(selectorProps);
/* 显式的注册事件 */
const emit = defineEmits(['selectChange']);
const options = data.map((item) => {
  return {
    id: item.id,
    title: item.title
  }
});

/* select修改事件 */
const selectChange = (value) => {
  emit('selectChange', +value)
}
</script>

<style lang='scss' scoped>
.select-box {
  height: 50px;
  line-height: 50px;
  text-align: center;
}
</style>